<!-- 确定收款or确定付款 -->
<template>
	<div>
		<!-- 提示窗 -->
		<uni-popup ref="Dialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" :confirmText="type==='collection'?'确定收款':'确定付款'" :title="type==='collection'?'收款':'付款'"
				@confirm="DialogConfirm" :before-close="true" @close="closeDialog()">
				<scroll-view scroll-top="0" scroll-y="true" style="height: 300px;">
					<view style="display: flex;flex-direction: column;width: 100%;">
						<view v-if="type==='collection'">
							<view style="display: flex;">
								<text style="width: 75px;">发货方：</text>
								<text>{{list.shipName}}</text>
							</view>
							<view style="display: flex;">
								<text style="width: 75px;">收货方：</text>
								<text>{{list.deliveryName}}</text>
							</view>
						</view>
						<view v-else>
							<view style="display: flex;">
								<text style="width: 75px;">承运商：</text>
								<text>{{list.carrierName}}</text>
							</view>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">结算状态：</text>
							<text>{{settleStatus_[list.status]}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">运单编号：</text>
							<text style="font-weight: bold;">{{list.outCode}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">交易金额(元)：</text>
							<text>{{list.tradeAmount}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">运单状态：</text>
							<text>{{waybillStatus_[list.waybillStatus]}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">结算方式：</text>
							<text>{{settlementMode_[list.settlementMode]}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">剩余时间：</text>
							<text>{{list.remainDay?list.remainDay:'--'}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">创建人：</text>
							<text>{{list.createBy}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">创建时间：</text>
							<text>{{parseTime(list.createTime)}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">{{type==='collection'?'应收总额(元)':'应付总额(元)'}}：</text>
							<text>{{type==='collection'?list.receivableAmount:list.payableAmount}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">{{type==='collection'?'实收金额(元)':'实付金额(元)'}}：</text>
							<text>{{list.realAmount}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">{{type==='collection'?'应收余额(元)':'应付余额(元)'}}：</text>
							<text>{{type==='collection'?list.receivableBalance:list.payableBalance}}</text>
						</view>
						<view style="height: 10px;"></view>
					</view>
					<uni-forms v-if="type==='collection'" ref="form" :modelValue="formData_payer" :rules="rules_payer" labelWidth="75px">
						<uni-forms-item :label="type==='collection'?'付款人':'收款人'" name="payer">
							<uni-easyinput type="text" v-model="formData_payer.payer" :placeholder="type==='collection'?'请输入付款人':'请输入收款人'" />
						</uni-forms-item>
						<uni-forms-item label="账号类型" name="payerAccountType" required>
							<uni-data-select :clear="false" v-model="formData_payer.payerAccountType" :localdata="payerAccountType"
								style="background-color: white;" />
						</uni-forms-item>
						<uni-forms-item :label="type==='collection'?'付款人账号':'收款人账号'" name="payerAccount" required>
							<uni-easyinput type="text" v-model="formData_payer.payerAccount" :placeholder="type==='collection'?'请输入付款人账号':'请输入收款人账号'" />
						</uni-forms-item>
						<uni-forms-item label="支付方式" name="payChannel" required>
							<uni-data-select :clear="false" v-model="formData_payer.payChannel" :localdata="payChannel"
								style="background-color: white;" />
						</uni-forms-item>
						<uni-forms-item label="支付金额" name="payAmount" required>
							<uni-easyinput type="text" v-model="formData_payer.payAmount" placeholder="请输入支付金额" />
						</uni-forms-item>
						<uni-forms-item label="付款时间" name="payTime" required>
							<uni-datetime-picker type="date" v-model="formData_payer.payTime" />
						</uni-forms-item>
						<uni-forms-item label="支付凭证">
							<myfilepicker :limit="'3'" :imageStyles="imageStyles" :fileIdString="formData_payer.payVoucher" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_payVoucher"
									:title="'*点击上传支付凭证，支持png/jpg/jpeg，最多可上传3个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>支付凭证</myfilepicker>
						</uni-forms-item>
						<uni-forms-item label="备注">
							<uni-easyinput type="textarea" v-model="formData_payer.remark" placeholder="相关备注说明" />
						</uni-forms-item>
					</uni-forms>
					<uni-forms v-else ref="form" :modelValue="formData_payee" :rules="rules_payee" labelWidth="75px">
						<uni-forms-item :label="type==='collection'?'付款人':'收款人'" name="payee">
							<uni-easyinput type="text" v-model="formData_payee.payee" :placeholder="type==='collection'?'请输入付款人':'请输入收款人'" />
						</uni-forms-item>
						<uni-forms-item label="账号类型" name="payeeAccountType" required>
							<uni-data-select :clear="false" v-model="formData_payee.payeeAccountType" :localdata="payerAccountType"
								style="background-color: white;" />
						</uni-forms-item>
						<uni-forms-item :label="type==='collection'?'付款人账号':'收款人账号'" name="payeeAccount" required>
							<uni-easyinput type="text" v-model="formData_payee.payeeAccount" :placeholder="type==='collection'?'请输入付款人账号':'请输入收款人账号'" />
						</uni-forms-item>
						<uni-forms-item label="支付方式" name="payChannel" required>
							<uni-data-select :clear="false" v-model="formData_payee.payChannel" :localdata="payChannel"
								style="background-color: white;" />
						</uni-forms-item>
						<uni-forms-item label="支付金额" name="payAmount" required>
							<uni-easyinput type="text" v-model="formData_payee.payAmount" placeholder="请输入支付金额" />
						</uni-forms-item>
						<uni-forms-item label="付款时间" name="payTime" required>
							<uni-datetime-picker type="date" v-model="formData_payee.payTime" />
						</uni-forms-item>
						<uni-forms-item label="支付凭证">
							<myfilepicker :limit="'3'" :imageStyles="imageStyles" :fileIdString="formData_payee.payVoucher" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_payVoucher"
									:title="'*点击上传支付凭证，支持png/jpg/jpeg，最多可上传3个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>支付凭证</myfilepicker>
						</uni-forms-item>
						<uni-forms-item label="备注">
							<uni-easyinput type="textarea" v-model="formData_payee.remark" placeholder="相关备注说明" />
						</uni-forms-item>
					</uni-forms>
					<view style="height: 50px;"></view>
				</scroll-view>
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	import {confirmReceivablePay} from '@/api/system/receivable.js'
	import {confirmPayablePay} from '@/api/system/payable.js'
	import {getDicts} from '@/api/system/dict.js'
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	export default {
		components: {
			myfilepicker
		},
		data() {
			return {
				formData_payer:{
					payer:'',
					payerAccountType: '',
					payerAccount: '',
					payChannel: '',
					payAmount: '',
					payTime:'',
					payVoucher:'',
					remark:''
				},
				// 校验规则
				rules_payer: {
					payerAccountType: {
						rules: [{
							required: true,
							errorMessage: '请选择账号类型',
						}]
					},
					payChannel: {
						rules: [{
							required: true,
							errorMessage: '请选择支付方式',
						}]
					},
					payAmount: {
						rules: [{
							required: true,
							errorMessage: '请输入支付金额',
						}]
					},
					payTime: {
						rules: [{
							required: true,
							errorMessage: '请选择付款时间',
						}]
					},
				},
				formData_payee:{
					payee:'',
					payeeAccountType: '',
					payeeAccount: '',
					payChannel: '',
					payAmount: '',
					payTime:'',
					payVoucher:'',
					remark:''
				},
				// 校验规则
				rules_payee: {
					payeeAccountType: {
						rules: [{
							required: true,
							errorMessage: '请选择账号类型',
						}]
					},
					payChannel: {
						rules: [{
							required: true,
							errorMessage: '请选择支付方式',
						}]
					},
					payAmount: {
						rules: [{
							required: true,
							errorMessage: '请输入支付金额',
						}]
					},
					payTime: {
						rules: [{
							required: true,
							errorMessage: '请选择付款时间',
						}]
					},
				},
				list:{},
				imageStyles: {
					width: '100%',
					height: 150,
					border: {
						radius: '4px'
					}
				},
				//结算状态
				settleStatus_:[],
				//运单状态
				waybillStatus_:[],
				//结算方式
				settlementMode_:[],
				//下拉框->账号类型
				payerAccountType:[],
				//下拉框->支付方式
				payChannel:[],
				type:'collection'
			}
		},
		created() {
			//结算状态
			getDicts('settle_status').then(res=>{
				res.data.forEach(item=>{
					this.settleStatus_[item.dictValue]=item.dictLabel
				})
			})
			//运单状态
			getDicts('waybill_status').then(res=>{
				res.data.forEach(item=>{
					this.waybillStatus_[item.dictValue]=item.dictLabel
				})
			})
			//结算方式
			getDicts('settle_type').then(res=>{
				res.data.forEach(item=>{
					this.settlementMode_[item.dictValue]=item.dictLabel
				})
			})
			//账号类型
			getDicts('account_type').then(res=>{
				this.payerAccountType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
				this.payeeAccountType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
			//支付方式
			getDicts('pay_channel').then(res=>{
				this.payChannel=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
		},
		computed: {
			parseTime() {
			   return function (time) {
			        let dateee = new Date(time).toJSON();
			        let date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')  
			        return date
			    }
			 }
		},
		methods: {
			//获取当前时间
			getNowDateTime(){
				const date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				// var hour = date.getHours()<10?('0'+date.getHours()):date.getHours();
				// var minute = date.getMinutes()<10?('0'+date.getMinutes()):date.getMinutes();
				// var second = date.getSeconds()<10?('0'+date.getSeconds()):date.getSeconds();
				return year+'-'+month+'-'+day;
			},
			//接收文件传递的id字符串集合
			getFileIdString_payVoucher(fileIds){
				this.formData.payVoucher=fileIds
			},
			//关闭弹窗
			closeDialog(){
				this.formData_payer={
					payer:'',
					payerAccountType: '',
					payerAccount: '',
					payChannel: '',
					payAmount: '',
					payTime:'',
					payVoucher:'',
					remark:''
				}
				this.formData_payee={
					payee:'',
					payeeAccountType: '',
					payeeAccount: '',
					payChannel: '',
					payAmount: '',
					payTime:'',
					payVoucher:'',
					remark:''
				}
				this.$refs.Dialog.close()
			},
			//打开弹窗
			open(item,type){
				this.list=item
				this.type=type
				if(type==='collection')
				{
				  this.formData_payer.payer = item.shipName //公司名称（发货方）
				  this.formData_payer.payAmount = item.receivableBalance //支付金额默认为应收余额
				  this.formData_payer.payTime=this.getNowDateTime()
				}
				else
				{
				  this.formData_payee.payee = item.carrierName //公司名称（承运商）
				  this.formData_payee.payAmount = item.payableBalance //支付金额默认为应收余额
				  this.formData_payee.payTime=this.getNowDateTime()
				}
				this.$refs.Dialog.open()
			},
			//确认收款/付款
			DialogConfirm(){
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						title: `${this.type=='collection'?'收款':'付款'}...`,
					})
					if(this.type==='collection')
					{
						//收款完成
						this.formData_payer.receivableId=this.list.id   //应收记录ID
						confirmReceivablePay(this.formData_payer).then(res => {
							uni.hideLoading()
							if (res.code == '200') {
								uni.showToast({
									title: '收款成功',
									icon: 'none'
								})
								this.closeDialog()
								this.$parent.getCollectionList()  //调用父组件的getCollectionList函数，重新加载数据
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							}	
						})
					}
					else
					{
						this.formData_payee.payableId=this.list.id   //应付记录ID
						//付款完成
						this.formData_payee.receivableId=this.list.id   //应收记录ID
						confirmPayablePay(this.formData_payee).then(res => {
							uni.hideLoading()
							if (res.code == '200') {
								uni.showToast({
									title: '付款成功',
									icon: 'none'
								})
								this.closeDialog()
								this.$parent.getPaymentList()  //调用父组件的getPaymentList函数，重新加载数据
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							}	
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				})
			},
		},
	}
</script>

<style scoped>

</style>